<template>
	<div class="top">
		<h3>基础信息</h3>
		<form class="f_top">
			<el-form-item label="停车场" style="width: 400px;">
				<el-select placeholder="请选择停车场"  v-model="selectedYard">
					<el-option
					        v-for="yard in data.yard"
					        :key="yard.yard_id"
					        :label="yard.yard_name"
					        :value="yard.yard_id"
							@click="handleYardChange(yard.yard_id)">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="车位编号" style="width: 400px;" >
				<el-input placeholder="输入车位号,如201" v-model="carbianhao" />
			</el-form-item>
			<el-form-item label="车位类型" style="width: 400px;">
				<el-select placeholder="请选择车位类型" v-model="selectedType">
					<el-option label="普通车位" value="普通车位"></el-option>
					<el-option label="车库" value="车库"></el-option>
					<el-option label="充电车位" value="充电车位"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="面积" style="width: 400px;">
				<el-input placeholder="输入车位面积" v-model="carmianji" />
			</el-form-item>
			<el-form-item label="关联房屋" style="width:420px;margin-right: 10px;margin-bottom: 50px;">
				<el-cascader v-model="lastNumber.xz" :options="options" :props="props1" clearable />
			</el-form-item>
			<el-form-item label="备注(选填)" style="width: 400px;">
				<el-input type="textarea" placeholder="备注" v-model="beizhu" />
			</el-form-item>
		</form>
	</div>

	<div class="conmit">
		<el-button class="but1">取消</el-button>
		<el-button class="but2" @click="add">确定</el-button>
	</div>
</template>

<script setup>
	  import { ref, reactive, onMounted } from 'vue';
	  import { useRouter } from 'vue-router';
	  import $http from '../router/AxiosApi.js';

	  // 使用 ref 来定义 selectedYard
	  const selectedYard = ref(null); // 使用 ref 定义基本类型的数据

	  // 使用 reactive 来定义 data
	  const data = reactive({
		yard: [],
		house: []
	  });
	  
	  const carbianhao=ref(null)
	  const carmianji=ref(null)
	  const beizhu=ref(null)
	  
	  const selectedType = ref(null); // 定义响应式数据，用于存储选择的车位类型

	  const loadYard = () => {
		$http.get("Yard/selectYard")
		  .then((res) => {
			console.log("停车场",res.data);
			data.yard = res.data.data;
		  })
		  .catch((error) => {
			console.error('Failed to load yards:', error);
		  });
	  };

	  const handleYardChange = (value) => {
		selectedYard.value = value; // 更新选择框的值，使用 .value
		console.log("Selected Yard:", selectedYard.value); // 打印选中的值，用于调试
	  };

	  onMounted(() => {
		loadYard();
		loadAll();
	  });
	  const lastNumber = reactive({
	  		  xz:''
	  })
	  
	  
	
	const props1 = {
			checkStrictly: true,
		}
	const options = reactive([]);
	
	const loadAll = () => {
	  $http.get("Parking/HousfindAll").then((res) => {
	    // 假设数据在 res.data.data 数组中
	    data.house = res.data.data || []; // 确保 data.house 是数组
	    console.log("Fetched house data:", data.house);
	    
	    if (Array.isArray(data.house)) {
	      const regions = data.house.map(house => ({
	        value: house.regionId,
	        label: house.regionName,
	        children: [
	          {
	            value: house.buildingId,
	            label: house.buildingName,
	            children: [
	              {
	                value: house.unitId,
	                label: house.unitName,
	                children: [
	                  {
	                    value: house.houseId,
	                    label: house.houseNumber
	                  }
	                ]
	              }
	            ]
	          }
	        ]
	      }));
	      // 更新 options 数组
	      options.splice(0, options.length, ...regions);
	      console.log("Updated options:", options);
	    } else {
	      console.error('Expected data.house to be an array, but it is not.');
	    }
	  }).catch((error) => {
	    console.error('API call failed:', error);
	  });
	};
	
	
	const router = useRouter();
	
	
const add = () => {
	const fromadd = {
		yard_id: selectedYard.value,
		parking_num: carbianhao.value,
		parking_type: selectedType.value,
		parking_area: carmianji.value
	};
	console.log(fromadd);

	$http.post("Parking/addCarspaces", fromadd).then((res) => {
		Object.assign(fromadd, res.data);
		console.log(fromadd);

		// 获取最大 ID
		$http.get("Parking/selectMaxid").then((res) => {
			const parkingmaxid = res.data.data;  // 从响应中获取 ID
			console.log("max", parkingmaxid);

			// 创建 form 对象并设置值
			const form = reactive({
				houseId: '',
				unitId: '',
				buildingId: '',
				regionId: '',
				billingItemsName: ''
			});
			
			if (lastNumber.xz === undefined) {
				console.log("未选择");
				form.buildingId = '';
				form.houseId = '';
				form.regionId = '';
				form.unitId = '';
			} else {
				form.regionId = lastNumber.xz[0]; // 第一个选项作为 regionId
				if (lastNumber.xz.length >= 2) {
					form.buildingId = lastNumber.xz[1]; // 第二个选项作为 buildingId
				}
				if (lastNumber.xz.length >= 3) {
					form.unitId = lastNumber.xz[2]; // 第三个选项作为 unitId
				}
				if (lastNumber.xz.length >= 4) {
					form.houseId = lastNumber.xz[3]; // 第四个选项作为 houseId
				}
			}
			console.log("houseId", form.unitId);

			const fromaddlianjie = {
				parking_id: parkingmaxid,  // 直接使用 ID 值
				yard_id: selectedYard.value,
				house_id: form.unitId  // 直接使用值
			};
			console.log(fromaddlianjie);
			$http.post("Parking/addCarParkingHousemanageYard", fromaddlianjie).then((res) => {
				Object.assign(fromaddlianjie, res.data);
				console.log(fromaddlianjie);
			});
			
			
			
		});
	});
	//router.push({ name: 'SpaceList' });
	// this.selectedYard = '';
	// this.carbianhao = '';
	// this.selectedType = '';
	// this.carmianji = '';
	// this.lastNumber.xz = [];
	// this.beizhu = '';
};
	
</script>

<style>
	.top {
		text-align: left;
		border-radius: 10px;
		padding: 24px;
		background-color: #fff;
		margin-bottom: 10px;
	}

	.button {
		text-align: left;
		border-radius: 10px;
		padding: 24px;
		background-color: #fff;
		margin-bottom: 16px;
		overflow: hidden;
	}
	.conmit{
		border-radius: 10px;
		padding: 24px;
		background-color: #fff;
		margin-bottom: 16px;
		display: -webkit-box;
		display: flex;
		justify-content: flex-end;
	}
	.f_top{
		margin-left: 10px;
	}
	.f_button{
		width: 1000px;
	}
	.el-select__wrapper el-tooltip__trigger el-tooltip__trigger{
		height: 40px;
	}
	.el-input{
		height: 40px;
		
	}
	.el-form-item__label{
		width: 150px;
	}
	.but1{
		width: 100px;
		height: 40px;
		font-size: 14px;
		padding: 0px 20px;
		color: #7e8081;
		background-color: #fafafa;
	}
	.but2{
		width: 100px;
		height: 40px;
		font-size: 14px;
		padding: 0px 20px;
		color: #fff;
		background-color: #80e1b6;
		border-color: #80e1b6;
	}
</style>